
var edata = beautifulLi.getCommunityData('page1');
// 热门推荐
edata.forEach(function (i) {
    // 创建外层div
    var j = 0;
    var l = $('<div>').prop('id', 'e-shops-rec');
    l.appendTo('.e-recommend')
    // 图片
    $('<div class="e-items-img"><img src="' + i.children[0].bigPic + '"></div>').prependTo(l);
    // 文字区域
    var text = $('<div class="e-items-rectxt"><div class="e-items-priceunit">￥<span>' + i.discountPrice + '</span></div><div class="e-items-name"><a href="###" title="商品名称" class="e-orange">' + i.name + '</a></div><div class="e-items-sales">已售<span>' + i.introduce + '</span>件</div> </div>');
    text.appendTo(l);

});
// 猜你喜欢
edata.forEach(function (i) {
    // 创建外层div
    var l = $('<div>').prop('id', 'e-shops-rec');
    l.appendTo('.e-contrnt-guess')
    // 图片
    $('<div class="e-items-img"><img src="' + i.children[0].bigPic + '"></div>').prependTo(l);
    // 文字区域
    var text = $('<div class="e-items-rectxt"><div class="e-items-priceunit">￥<span>' + i.discountPrice + '</span></div><div class="e-items-name"><a href="###" title="商品名称" class="e-orange">' + i.name + '</a></div><div class="e-items-sales">已售<span>' + i.introduce + '</span>件</div> </div>');
    text.appendTo(l);

});
// 主题内容模块                               
// 三图
// console.log(edata);
function addData(date) {
    date.forEach(function (i) {
        // 创建外层div
        var e_shops = $('<div class="e-content-itemsBig e-shops" id="">');
        e_shops.appendTo('.e-content-left');

        var imgUrlleng = i.children.length;
        // console.log(imgUrlleng);
        if (imgUrlleng == 1) {
            // 大图片
            var photoBig = $('<div class="e-items-img"><img class= "e-show" src = "' + i.children[0].bigPic + '"alt = ""></div>');
            // 焦点小图片
            var photosmall = $('<div class="e-items-side"><ul><li><img class= "e-show" src = "' + i.children[0].smallPic + '"alt = ""></li></ul></div>');
            photoBig.appendTo(e_shops);
            photosmall.appendTo(e_shops);
        } else if (imgUrlleng == 2) {
            // 大图片
            var photoBig = $('<div class="e-items-img"><img class= "e-show" src = "' + i.children[0].bigPic + '"alt = ""><img class= "" src = "' + i.children[1].bigPic + '"alt = ""></div>');
            // 焦点小图片
            var photosmall = $('<div class="e-items-side"><ul><li><img class= "e-show" src = "' + i.children[0].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[1].smallPic + '"alt = ""></li></ul></div>');
            photoBig.appendTo(e_shops);
            photosmall.appendTo(e_shops);
        } else if (imgUrlleng == 3) {
            // 大图片
            var photoBig = $('<div class="e-items-img"><img class= "e-show" src = "' + i.children[0].bigPic + '"alt = ""><img class= "" src = "' + i.children[1].bigPic + '"alt = ""><img class= "" src = "' + i.children[2].bigPic + '"alt = ""></div>');
            // 焦点小图片
            var photosmall = $('<div class="e-items-side"><ul><li><img class= "e-show" src = "' + i.children[0].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[1].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[2].smallPic + '"alt = ""></li></ul></div>');
            photoBig.appendTo(e_shops);
            photosmall.appendTo(e_shops);
        } else if (imgUrlleng >= 4) {
            // 大图片
            var photoBig = $('<div class="e-items-img"><img class= "e-show" src = "' + i.children[0].bigPic + '"alt = ""><img class= "" src = "' + i.children[1].bigPic + '"alt = ""><img class= "" src = "' + i.children[2].bigPic + '"alt = ""><img class= "" src = "' + i.children[3].bigPic + '"alt = ""></div>');
            // 焦点小图片
            var photosmall = $('<div class="e-items-side"><ul><li><img class= "e-show" src = "' + i.children[0].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[1].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[2].smallPic + '"alt = ""></li><li><img class= "" src = "' + i.children[3].smallPic + '"alt = ""></li></ul></div>');
            photoBig.appendTo(e_shops);
            photosmall.appendTo(e_shops);
        };
        // 价格、原价、销量、评论
        var price = $('<div class="e-items-price"><div class="e-items-unit">￥<span>' + i.discountPrice + '</span></div><div class= "e-items-sales"> 已售 <span> ' + i.introduce + '</span> 件</div><div class= "e-items-unitDel" style = "display: none;"> <del>￥<span>' + i.originalPrice + '</span></del></div><div class= "e-items-comment" style = "display: none;"> 已评论 <span>12</span ></div ></div>');
        // 商品名称
        var name = $('<div class="e-items-name"><a href="###" title="商品名称" class="e-orange">' + i.name + '</a></div>')
        // 店铺名称
        var diname = $('<p class="e-items-storeName"><a href="###" title="店铺名称">商创自营店</a><span class="iconfont icon-kefu "></span></p>')
        // 商品块控件
        var kjian = $('<div class="e-items-control"><a href="###" class="e-items-control-comp"><span class="iconfont icon-yk_fangkuai"></span><span>对比</span></a><a href="###" class="e-items-collect"><span class="iconfont icon-shoucang"></span><span>收藏</span></a><a href="###" class="e-items-trolley"><span class="iconfont icon-gouwuche"></span><span>加入购物车</span></a></div>')

        // photoBig.appendTo(e_shops);
        // photosmall.appendTo(e_shops);
        price.appendTo(e_shops);
        name.appendTo(e_shops);
        diname.appendTo(e_shops);
        kjian.appendTo(e_shops);

    });
};
// 渲染
addData(edata);
// 焦点
phototaggle()
// 控件样式
kongjscc()
// 3. 根据价格查询商品
// 当我们失去焦点,就可以根据我们的商品价格去筛选数组里面的对象
$('.e-end').on('change', function () {
    $('.e-content-left').empty();
    var estr = $('.e-start').val();
    var eend = $('.e-end').val();
    if (estr == '' || eend == '') {
        addData(edata);
        return;
    }
    var newaddDate = edata.filter(function (valu) {
        // console.log(valu);
        // console.log(valu.discountPrice);
        return valu.discountPrice >= estr && valu.discountPrice <= eend;
    });
    // console.log(newaddDate);
    // // 把筛选完之后的对象渲染到页面中
    addData(newaddDate);
});
// 默认排序
$('.e-mo').on('click', function () {
    $('.e-content-left').empty();
    addData(edata);
})

// 价格排序
$('.e-price-top').on('click', function () {
    $('.e-content-left').empty();
    var Price = edata.sort(function (a, b) {
        return b.discountPrice - a.discountPrice;
    });

    // 渲染
    addData(Price);
    // 焦点
    phototaggle()
    // 控件样式
    kongjscc()
});

// 销量排序
$('.e-xiao').on('click', function () {
    $('.e-content-left').empty();
    var introduce = edata.sort(function (a, b) {
        return b.introduce - a.introduce;
    });

    // 渲染
    addData(introduce);
    // 焦点
    phototaggle()
    // 控件样式
    kongjscc()
});

// 大图标下图片切换
function phototaggle() {
    $('.e-items-side li').each(function (index, ele) {
        $(this).hover(function () {
            $('.e-items-img img').eq(index).addClass('e-show').siblings().removeClass('e-show');

        });
    });

};

//对比 收藏 加购
function kongjscc() {
    $('.e-items-control a').hover(function () {
        $(this).toggleClass('e-items-divcolor');
        $(this).find('span').css('color', '#f42424');
    }, function () {
        $(this).find('span').css('color', '#aaa');
        $(this).toggleClass('e-items-divcolor');
    });

};

// 加入购物车
$('.e-items-trolley').each(function (index, val) {
    $(this).on('click', function () {
        obj = [{
            "id": edata[index].id,
            "price": edata[index].discountPrice,
            "title": edata[index].name
        }]
        localStorage.setItem('e-shop', JSON.stringify(obj));
        // console.log(JSON.stringify(obj));
    })
})



// 评论排序

// 四图
// data.forEach(function (i) {
//     // 创建外层div
//     var e_shops = $('<div class="e-content-itemsBig e-shops" id="">');
//     // 大图片
//     var photoBig = $('<div class="e-items-img"><img class= "e-show" src = "' + i.children[0].bigPic + '"alt = ""><img src="' + i.children[1].bigPic + '" alt=""><img src="' + i.children[2].bigPic + '" alt=""><img src="' + i.children[3].bigPic + '" alt=""></div>');
//     // 焦点小图片
//     var photosmall = $('<div class="e-items-side"><ul><li><img class= "e-show" src = "' + i.children[0].smallPic + '"alt = ""></li><li><img src="' + i.children[1].smallPic + '" alt=""></li><li><img src="' + i.children[2].smallPic + '" alt=""></li><li><img src="' + i.children[3].smallPic + '" alt=""></li></ul></div>');
//     // 价格、原价、销量、评论
//     var price = $('<div class="e-items-price"><div class="e-items-unit">￥<span>' + i.discountPrice + '</span></div><div class= "e-items-sales"> 已售 <span> ' + i.introduce + '</span> 件</div><div class= "e-items-unitDel" style = "display: none;"> <del>￥<span>' + i.originalPrice + '</span></del></div><div class= "e-items-comment" style = "display: none;"> 已评论 < span > 64</span ></div ></div>');
//     // 商品名称
//     var name = $('<div class="e-items-name"><a href="#" title="商品名称" class="e-orange">' + i.name + '</a></div>')
//     // 店铺名称
//     var diname = $('<p class="e-items-storeName"><a href="#" title="店铺名称">商创自营店</a><span class="iconfont icon-kefu "></span></p>')
//     // 商品块控件
//     var kjian = $('<div class="e-items-control"><a href="#" class="e-items-control-comp"><span class="iconfont icon-yk_fangkuai"></span><span>对比</span></a><a href="#" class="e-items-collect"><span class="iconfont icon-shoucang"></span><span>收藏</span></a><a href="#" class="e-items-trolley"><span class="iconfont icon-gouwuche"></span><span>加入购物车</span></a></div>')

//     e_shops.appendTo('.e-content-left');
//     photoBig.appendTo(e_shops);
//     photosmall.appendTo(e_shops);
//     price.appendTo(e_shops);
//     name.appendTo(e_shops);
//     diname.appendTo(e_shops);
//     kjian.appendTo(e_shops);

// });

// 销量排序
// $('.e-xiao').on('click', function () {
//     $('.e-content-left').empty();
//     var xxx = [];
//     for (var i = 0; i < edata.length; i++) {
//         xxx.push(edata[i].introduce);
//     }
//     xxx.sort(function (a, b) {
//         return b - a;
//     })
//     // console.log(aaa);
//     // (edata);
//     var newedatax = [];
//     for (var j = 0; j < xxx.length; j++) {
//         edata.forEach(function (val, index, arr) {
//             console.log(val, index);
//             var pricval = val.introduce;
//             if (xxx[j] == pricval) {
//                 newedatax.push(val);
//                 // continue;
//             };

//         });
//     };
//     // 渲染
//     addData(newedatax);
//     // 焦点
//     phototaggle()
//     // 控件样式
//     kongjscc()
// });